define(function(require, exports, module) {

  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');

  var Konva = require('konva');
  var env = window.env;

  function main() {
    var $app = $('<div id="app">').width(env.w).height(env.h).addClass('mesh');
    $('#main').html($app);
    app($app)
  }

  function app() {
    var stage = new Konva.Stage({
      container: 'app',
      width: env.w,
      height: env.h
    });

    var width = window.env.w;
    var height = window.env.h;

    var layer = new Konva.Layer();

    var rect = new Konva.Rect({
        // x: 50,
        // y: 50,
        width: 150,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });

    var arrow = new Konva.Arrow({
      // x: 50,
      // y: 50,
      points: [0,0, width / 2, height / 2],
      pointerLength: 20,
      pointerWidth : 20,
      fill: 'black',
      stroke: 'black',
      strokeWidth: 4,
      draggable: true
    });

    rect.on('dragmove', function(e) {
      arrow.setAttr('points', [e.target.attrs.x, e.target.attrs.y, width / 2, height / 2])
    })


    rect.on('mouseover', cursorChange('pointer'));
    rect.on('mouseout', cursorChange('default'));

    layer.add(rect);
    layer.add(arrow);
    stage.add(layer);
  }

  function cursorChange(cursor) {
    return function() {
      document.body.style.cursor = cursor;
    }
  }

  return main;
})
